<template>
	<view class="bg-wrap">
		<view class="content-wrap">
			<u-navbar :border-bottom="false" title="邀请好友" back-icon-name="nav-back"
				back-icon-color="#343A40" :custom-back="tui.goBack" fixed placeholder>
			</u-navbar>
			<view class="content position-relative">
				<view class="invite-title position-relative text-ffffff fz-28 text-center">
					<image src="/static/home/invite.png"></image>
				</view>
				<view class="code-box" >
					<view class= "d-flex justify-content-center align-items-center code-warp">
						<view>
							<view class="d-flex justify-content-center align-items-center code">
								<tki-qrcode style="z-index: 10;" @result="qrR" ref="qrcode" :val="address" :size="size"
									background="#ffffff" :onval="true" :loadMake="true" />
							</view>
							<view class="save-box">
								<view class="text" @tap="sharePoster">保存到本地</view>
							</view>
						</view>
					</view>
				</view>
				<view class="link-wrap">
					<view class="d-flex justify-content-between link-box align-items-center">
						<view class="text-FFFEFF fz-26 link-text">我的邀请链接</view>
						<view class="d-flex justify-content-end align-items-center link-right">
							<view class="link text-0BFBF8 fz-24">{{address}}</view>
							<view class="copy-icon" @click="copy(address)">
								<image src="/static/mine/copy-icon.png"></image>
							</view>
						</view>
					</view>
					<view class="d-flex justify-content-between link-box align-items-center mb-0">
						<view class="text-FFFEFF fz-26 link-text">我的邀请码</view>
						<view class="d-flex justify-content-end align-items-center link-right link-invite">
							<view class="text-0BFBF8 fz-24">{{USER.code}}</view>
							<view class="copy-icon" @click="copy(USER.code)">
								<image src="/static/mine/copy-icon.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="invite-list-warp">
				<view class="invite-list-box">
					<view class="invite-title">
						<image src="/static/home/invite-title.png"></image>
					</view>
					<view class="invite-list-top">
						<image src="/static/home/invite-list-top.png"></image>
					</view>
					<view class="invite-list">
						<view class="d-flex justify-content-center align-items-center">
							<view class="invite-total">
								<view class="fz-24 text-center invite-text-color">邀请人数</view>
								<view class="d-flex justify-content-center align-items-end pt-2">
									<span class="text-0BFBF8 fz-40 line-h-1em pr-2">{{inviteInfo.children_count}}</span>
									<span class="text-ffffff fz-24 ">人</span>
								</view>
							</view>
							<view class="line"></view>
							<view  class="invite-total">
								<view class="fz-24 text-center invite-text-color">有效用户</view>
								<view class="d-flex justify-content-center align-items-end pt-2">
									<span class="text-0BFBF8 fz-40 line-h-1em pr-2">{{inviteInfo.active_children_count}}</span>
									<span class="text-ffffff fz-24 ">人</span>
								</view>
							</view>
						</view>
						<view class="d-flex justify-content-between invite-list-title align-items-center invite-text-color fz-24">
							<view class="invite-list-user text-left">受邀好友</view>
							<view class="invite-list-phone text-center">手机号</view>
							<view class="invite-list-prescription text-center">是否有效</view>
							<view class="invite-list-time text-right">注册时间</view>
						</view>
						<view class="d-flex justify-content-between invite-list-title align-items-center text-ffffff fz-26" v-for="item in list">
							<view class="invite-list-user d-flex align-items-center">
								<view class="invite-user-icon">
									<image :src="item.avatar || $avatar" mode="aspectFill"></image>
								</view>
								<view class="nickname u-line-1">{{item.nickname}}</view>
							</view>
							<view class="invite-list-phone text-center">{{item.mobile}}</view>
							<view class="invite-list-prescription text-center">
								<view class="prescription">
									<image src="/static/home/prescription.png" v-if="item.active"></image>
									<image src="/static/home/prescription-no.png" v-else></image>
								</view>
							</view>
							<view class="invite-list-time text-right ">{{item.created_at.substring(5,16)}}</view>
						</view>
						<u-loadmore :status="status" v-show="loading" margin-top="50" color="rgba(255,255,255,0.7)" />
					</view>
					<view class="invite-list-bottom">
						<image src="/static/home/invite-list-bottom.png"></image>
					</view>
				</view>
				
			</view>
			<view class="mask" v-show="showMask" @tap="updataShow">
				<view class="optionMask" :class="{'showOP':ispic}">
					<r-canvas ref="rCanvas"></r-canvas>
				</view>
				<view class="save-btn" @click.stop="savePic" v-show="ispic">
					保存本地
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	export default {
		components: {
			tkiQrcode,
			rCanvas
		},
		data() {
			return {
				size:260,
				imgSrc: '',
				ispic: false,
				showMask: false,
				inviteInfo:{
					active_children_count:'-',
					children_count:'-'
				},
				page:1,
				total:'',
				list:[],
				status:'loading',
				loading:false
			}
		},
		onLoad() {
			this.inviteCount()
			this.inviteList()
		},
		computed: {
			USER() {
				return this.$store.state.auth.USER
			},
			address() {
				return `${this.$BASE_PATH}/#/pages/login/registered?code=${this.USER.code}`
			}
		},
		onReachBottom() {
			if(this.list.length < this.total){
				this.page ++
				this.inviteList()
			}else{
				if(this.list.length >= 15){
					this.loading = true
					this.status = 'nomore'
				}
			}
		},
		methods: {
			//获取邀请数量
			inviteCount(){
				this.$store.dispatch('user/inviteCount').then(res=>{
					this.inviteInfo = res.data
				})
			},
			//获取邀请列表
			inviteList(){
				this.loading = true
				this.status = 'loading'
				this.$store.dispatch('user/inviteList',{page:this.page}).then(res=>{
					this.total = res.data.total
					if(this.page == 1){
						this.list = res.data.data
					}else{
						this.list = [...this.list,...res.data.data]
					}
					if(this.list.length  == this.total && this.list.length >= 15){
						this.status = 'nomore'
					}else{
						this.loading = false
					}
				}).catch(error=>{
					this.loading = false
				})
			},
			//复制钱包地址
			copy(address) {
				uni.setClipboardData({
					data: address,
					success: (data) => {
						uni.showToast({
							title:'复制成功'
						})
					}
				})
			},
			qrR(e) {
				this.imgSrc = e
			},
			sharePoster() {
				this.showMask = true
				this.haibao()
			},
			updataShow() {
				this.showMask = false
				this.ispic = false
			},
			haibao() {
				this.$nextTick(async () => {
					uni.showLoading({
						title: '生成中',
						mask: true
					})
					// 初始化画布
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						background_color: 'rgba(0,0,0,0)',
						canvas_width: 290,
						canvas_height: 507
					})
					// 画背景图
					await this.$refs.rCanvas.drawImage({
						url: '/static/home/share-fri.png',
						x: 0,
						y: 0,
						w: 290,
						h: 507
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					// 画二维码
					await this.$refs.rCanvas.drawImage({
						url: '/static/home/qr-code.png',
						x: 8,
						y: 450,
						w: 45,
						h: 45,
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					// 画邀请码
					await this.$refs.rCanvas.drawText({
						text: this.USER.code,
						max_width: 0,
						x: 230,
						y: 484,
						font_color: "#292940",
						font_size: 14,
						font_weight:'bold'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						uni.hideLoading()
						this.ispic = true
						this.picPath = res.tempFilePath
					})
				})
			},
			savePic() {
				// 保存图片
				// #ifdef APP-PLUS
				var that = this
				that.ispic = false
				that.showMask = false
				uni.canvasToTempFilePath({
					canvasId: 'rCanvas',
					quality: 1,
					complete: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
								})
							}
						})
					}
				}, this);
				// #endif
				// #ifdef H5
				this.$refs.rCanvas.saveImage(this.picPath)
				// #endif

			}
		}

	}
</script>

<style lang="scss" scoped>
	.bg-wrap{
		width: 100%;
		min-height: 100vh;
		background: #201b77;
	}
	.content-wrap {
		width: 100%;
		background-image: url(/static/home/invite-bg.png);
		background-repeat: no-repeat;
		background-size: 100%;
		min-height: 100vh;
		position: relative;
	}

	.content {
		width: 100%;
		position: relative;

		.invite-title {
			padding: 110upx 0 34upx 0;
			image {
				width: 559upx;
				height: 194upx;
				vertical-align: top;
			}

		}
	
		.code-box{ 
			width: 340upx;
			padding-left: 22upx;
			/* #ifdef H5 */
				margin:50upx auto 300upx;
			/* #endif */
			
			/* #ifdef APP-PLUS */
				margin:18upx auto 300upx;
			/* #endif */
			
		}
		.code-warp{
			width: 320upx;
			overflow: hidden;
			border-radius: 20upx;
			background:#292940; 
			border: 6upx solid #0DFCF7;
			
			/* #ifdef H5 */
				padding: 4upx 0;
			/* #endif */
			/* #ifdef APP-PLUS */
			padding: 5upx 0;
			/* #endif */
		}
		
		
		.code {
			width: 300upx;
			height: 300upx;
			padding: 10upx 10upx 4upx 10upx;
			overflow: hidden;
			box-sizing: border-box;
			border-radius: 10upx 10upx 0 0 ;
			background: #fff;
			
			image{
				width: 280upx;
				height: 280upx;
				vertical-align: top;
			}
		}
		.save-box{
			width: 300upx;
			height: 56upx;
			background: #fff;
			border-radius: 0 0 10upx 10upx;
			.text{
				font-weight:600;
				text-align: center;
				font-size: 26upx;
				color: transparent;
				line-height: 37upx;
				background: linear-gradient(115deg, #8F29FF 0%, #34BBFA 100%);
				-webkit-background-clip: text;
			}
		}
		.invite-bottom {
			width: 428upx;
			height: 528upx;
			position: fixed;
			position: absolute;
			top: 714upx;
			right: 15upx;
			z-index: 1;

			image {
				width: 428upx;
				height: 528upx;
				vertical-align: top;
			}
		}
		.link-wrap{
			margin: 0 auto;
			margin-bottom: 80upx;
			width: 684upx;
			height: 265upx;
			border-radius: 8upx;
			box-sizing: border-box;
			background: url(/static/home/invite-bg-link.png) no-repeat;
			background-size: 100% 100%;
			padding-top: 70upx;
			padding-left: 34upx;
			padding-right:46upx;
		}
		.link-box {
			margin-bottom: 30upx;
			.link-text{
				margin-right: 56upx;
			}
			.link-right{
				padding: 0 22upx;
				box-sizing: border-box;
				width: 381upx;
				height: 48upx;
				background: rgba(50, 52, 80, 0.4);
				box-shadow: inset 0px 1upx 0px 0px rgba(23,23,35,0.3);
				border-radius: 24upx;
			}
			.link-invite{
				width: 176upx;
			}
			.link {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.copy-icon {
				width: 36upx;
				height: 36upx;
				margin-left: 13upx;
				image {
					width: 36upx;
					height: 36upx;
					vertical-align: top;
				}
			}
		}
		
		
	}

	.btn-fixed {
	 position:fixed;
	 bottom: 60upx;
	 width: 100%;

	}

	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 200upx 85upx;
		z-index: 99999;

		.optionMask {
			opacity: 0;
		}

		.showOP {
			opacity: 1;
		}

		.save-btn {
			box-sizing: border-box;
			width: 200upx;
			color: #FFFFFF;
			padding: 10rpx 0;
			text-align: center;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 35rpx;
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		}
	}
	.invite-list-warp{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		padding-bottom: 40upx;
		.invite-list-box{
			width: 100%;
			background: url(/static/home/invite-list-bg.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			padding-bottom: 60upx;
			.invite-title{
				position: absolute;
				width: 370upx;
				height: 76upx;
				left:50%;
				transform: translateX(-50%);
				top:-38upx;
				image{
					width: 370upx;
					height: 76upx;
					vertical-align: top;
				}
			}
			.invite-text-color{
				color:rgba(255,255,255,0.7)
			}
			.invite-list{
				width: 100%;
				min-height: 300upx;
				padding: 0 27upx;
				box-sizing: border-box;
				.invite-total{
					flex: 1;
					margin-bottom: 20upx;
				}
				.line{
					width: 1upx;
					height: 56upx;
					background: rgba(255,255,255,0.3);
				}
				.invite-list-title{
					height: 68upx;
				}
				.invite-list-user{
					width: 27%;
					.nickname{
						max-width: 110upx;
					}
					.invite-user-icon{
						width: 44upx;
						height: 44upx;
						margin-right: 8upx;
						border-radius: 44upx;
						image{
							border-radius: 44upx;
							width: 44upx;
							height: 44upx;
							vertical-align: top;
						}
					}
				}
				.invite-list-phone{
					width: 27%;
				}
				.invite-list-prescription {
					width: 20%;
				}
				
				.invite-list-time{
					width: 26%; 
				}
				.prescription{
					width: 28upx;
					height: 28upx;
					margin: 0 auto;
					image{
						width: 28upx;
						height: 28upx;
						vertical-align: top;
					}
				}
				
			}
			.invite-list-top{
				width: 690upx;
				height: 82upx;
				image{
					width: 690upx;
					height: 82upx;
				}
			}
			.invite-list-bottom{
				position: absolute;
				width: 690upx;
				height: 119upx;
				bottom: 0;
				image{
					width: 690upx;
					height: 119upx;
				}
			}
		}
	}
	
</style>
